<template>
    <h3>用户信息展示</h3>
    <table>
        <thead>
            <tr style="background-color: :aqua;">
                <td>登录名称</td>
                <td>登录密码</td>
                <td>真实姓名</td>
                <td>身份证号</td>
                <td>联系方式</td>
                <td>出生日期</td>
                <td>性别</td>
                <td>用户类型</td>
                <td>年收入</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in data" :key="item.U_Id">
                <td>{{ item.UL_Name }}</td>
                <td>******</td>
                <td>{{ item.U_Name }}</td>
                <td>{{ item.U_IdCard }}</td>
                <td>{{ item.U_Phone }}</td>
                <td>{{ item.U_Date }}</td>
                <td>{{ item.U_Sex == true ? '男' : '女' }}</td>
                <td>{{ item.UT_Name }}</td>
                <td>{{ item.U_Income }}</td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import { onMounted, ref } from 'vue'
import axios from 'axios';

//创建响应对象
const data = ref([{
    UL_Name: '',
    UL_Pwd: '',
    U_Name: '',
    U_Phone: '',
    U_IdCard: '',
    U_Date: '',
    U_Sex: false,
    U_Income: '',
    UT_Name: '',
    U_Id: ''
}])

onMounted(() => {
    axios({
        method: "get",
        url: "https://localhost:44305/api/Users/GetAllUserInfo"
    })
        .then(function (res) {
            data.value = res.data;
        })
})

</script>